// 简化版文件预览组件 - 避免复杂性导致的Vue初始化问题

(function() {
    // 确保Vue已加载
    if (typeof Vue === 'undefined') {
        console.error('Vue is not loaded');
        return;
    }
    
    const { ref, computed } = Vue;

    // 简化版预览组件
    const SimpleFilePreview = {
        name: 'SimpleFilePreview',
        template: `
            <div v-if="visible" class="simple-preview-overlay" @click="handleOverlayClick">
                <div class="simple-preview-container" @click.stop>
                    <!-- 关闭按钮 -->
                    <button class="simple-preview-close" @click="closePreview">×</button>
                    
                    <!-- 预览内容 -->
                    <div class="simple-preview-content">
                        <!-- 图片预览 -->
                        <div v-if="isImage" class="simple-image-preview">
                            <img :src="currentFile.cover" :alt="currentFile.file_name" />
                        </div>
                        
                        <!-- 视频预览 -->
                        <div v-else-if="isVideo" class="simple-video-preview">
                            <video :src="currentFile.cover" controls preload="metadata">
                                您的浏览器不支持视频播放
                            </video>
                        </div>
                        
                        <!-- 音频预览 -->
                        <div v-else-if="isAudio" class="simple-audio-preview">
                            <div class="audio-info">🎵 {{ currentFile.file_name }}</div>
                            <audio :src="currentFile.cover" controls preload="metadata">
                                您的浏览器不支持音频播放
                            </audio>
                        </div>
                        
                        <!-- 不支持的类型 -->
                        <div v-else class="simple-unsupported">
                            <p>📄 不支持预览此文件类型</p>
                            <p>{{ currentFile.file_name }}</p>
                        </div>
                    </div>
                    
                    <!-- 文件名 -->
                    <div class="simple-preview-filename">{{ currentFile.file_name }}</div>
                </div>
            </div>
        `,
        props: {
            visible: Boolean,
            files: Array,
            currentIndex: Number
        },
        emits: ['update:visible'],
        setup(props, { emit }) {
            const currentFile = computed(() => {
                return props.files[props.currentIndex] || {};
            });
            
            const isImage = computed(() => {
                return currentFile.value.type === 1;
            });
            
            const isVideo = computed(() => {
                return currentFile.value.type === 7;
            });
            
            const isAudio = computed(() => {
                return currentFile.value.type === 6;
            });
            
            const closePreview = () => {
                emit('update:visible', false);
            };
            
            const handleOverlayClick = (e) => {
                if (e.target === e.currentTarget) {
                    closePreview();
                }
            };
            
            return {
                currentFile,
                isImage,
                isVideo,
                isAudio,
                closePreview,
                handleOverlayClick
            };
        }
    };

    // 导出组件
    window.SimpleFilePreview = SimpleFilePreview;
    
})();